<!-- components/Bookshelf.vue -->
<template>
  <div id="app">
    <el-table :data="books">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="bookname" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
       <el-table-column prop="copies" label="复制次数"></el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle
            @click.native.prevent="deleteRow(scope.$index)">

          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  computed: {
    books() {
      return this.$store.getters.allBooks; // 从Vuex Store获取书籍列表
    }
  },
  methods: {
    deleteRow(index) {
      this.$store.dispatch('removeBookFromStore', index); // 删除书籍
    }
  }
};
</script>